 <template>
  <!-- 登录 -->
  <div class="contianer">
    <div class="pic"></div>
    <div class="login-container">
      <h1 class="title">企业登录</h1>
      <el-form ref="loginForm" :model="loginForm">
        <el-form-item
          prop="userName"
          :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' }]"
        >
          <el-input v-model.trim="loginForm.userName" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item
          prop="password"
          :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
        >
          <el-input
            type="password"
            show-password
            v-model.trim="loginForm.password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="captcha"
          :rules="[{ required: true, message: '请输入登录验证码', trigger: 'blur' }]"
        >
          <el-input
            @keyup.enter.native="submitLoginForm('loginForm')"
            v-model.trim="loginForm.captcha"
            placeholder="登录验证码"
            class="code-style"
          ></el-input>
          <div style="float: right; width: 40%; height: 32px; margin-left: 4%;">
            <img
              v-bind:src="codeImg"
              style="width:100%;height:40px;"
              @click="change_captcha('login');"
              data-toggle="tooltip"
              data-placement="top"
              title="看不清，点击换一张"
            >
          </div>
        </el-form-item>
        <el-form-item>
          <!-- <el-button class="btn" @click="resetForm('loginForm')">重置</el-button> -->
          <el-button
            class="btn login-btn"
            @click="submitLoginForm('loginForm')"
            v-loading.fullscreen.lock="fullscreenLoading"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getLoginCode, login } from "api/login";
import { setToken } from "src/util/auth.js";

let img_byte = "data:image/png;base64,";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      loginForm: {
        userName: "",
        password: "",
        captcha: ""
      },
      fullscreenLoading: false, //登录全屏加载显示
      codeImg: "", // 【验证码】图片地址
      // showModel: "login", // 显示注册【register】/登录【login】切换
      // validatePass直接放入html中无法执行new Error()【密码验证】
      validatePass: [
        {
          validator: (rule, value, callback) => {
            if (value === "") {
              return callback(new Error("请再次输入密码"));
            } else if (value !== this.registerForm.password) {
              return callback(new Error("两次输入密码不一致!"));
            } else {
              return callback();
            }
          },
          trigger: "blur"
        }
      ]
    };
  },
  props: ["showModel", "changeModel"],
  computed: {
    ...mapState(["userInfo"])
  },
  mounted() {
    this.change_captcha();
  },
  methods: {
    ...mapMutations(["RECORD_USERINFO"]),
    // 重复获取验证码
    change_captcha: function(type) {
      this.codeImg = getLoginCode();
    },
    keyPress: function() {
      this.submitLoginForm();
    },
    // 登录
    submitLoginForm: function(formName) {
      this.validate(formName, () => {
        var data = this.loginForm;
        this.fullscreenLoading = true;
        login(data).then(
          res => {
            console.log(res);
            this.change_captcha();

            // 账号或密码错误
            if (res.status > 200) {
              this.fullscreenLoading = false;
              return;
            }

            this.resetForm(formName);

            // 设置token到cookie中
            // setToken(res.token);
            this.RECORD_USERINFO(res); // 用户信息存入缓存中

            // 跳转判断是否有预存的路径
            // if (this.$route.query.redirect) {
            //   //     let redirect = decodeURIComponent(this.$route.query.redirect);
            //   let redirect = this.$route.query.redirect;
            //   this.$router.push(redirect);
            // } else {
            //   this.$router.push("/");
            // }

            // 默认跳转到第一页
            if (res.orgType === "COURSE_SUPPLIER") {
              // 数据管理员无【主页】页面
              this.$router.push("/template");
            } else {
              this.$router.push("/");
            }

            this.fullscreenLoading = false;
          },
          err => {}
        );
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    validate: function(formName, callback) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          callback();
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.contianer {
  display: flex;
  justify-content: center;
  margin-top: 80px;

  .pic {
    background-image: url("../../../images/picture.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 500px;
    height: 300px;
    margin: 30px 50px 0 50px;
  }

  .login-container {
    text-align: center;
    padding: 20px 30px;
    width: 320px;
    border-radius: 10px;
    border: 1px solid #888;
  }

  .title {
    padding: 20px 0;
    color: #888;
  }

  .code-style {
    width: 138px;
  }

  .btn {
    width: 256px;
  }

  .login-btn {
    background: #1fc3b3;
    color: #fff;
    border: none;
  }
}
</style>
